<template>
    <div class="infinite-scroll-container">
        <List
            v-model="loading"
            :finished="finished"
            :error="error"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="scroll-list">
                <div v-for="item in list" :key="item">
                    {{ item }}
                </div>
            </div>
        </List>
    </div>
</template>

<script>
// 可参考vant List组件更详细
import { List } from 'vant';
export default {
    components: {
        List
    },
    data() {
        return {
            list: [],
            loading: false,
            error: false,
            finished: false
        }
    },
    methods: {
        onLoad() {
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                }
                this.loading = false;
                this.error = false;
                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1500)
        },
    },
}
</script>
<style lang="less" scoped>
    .infinite-scroll-container {
        .scroll-list {
            >div {
                height: 80px;
                text-align: center;
                line-height: 80px;
            }
        }
    }
</style>

